<template>
  <a-col :span="3" :offset="3" class="userOpreation" style="display:flex;">
    <imageVue :borderRadius="'50px'" :width="'30px'" :height="'30px'" :cover="avatar" />
    <a-dropdown>
      <span @click="(e) => e.preventDefault()" v-if="!isShowLogin">
        {{ userName }}
        <a-icon type="down" />
      </span>
      <span class="topLogin" v-else>
        <span @click="loginClick">登录</span>
        <span>|</span>
        <span @click="toRegister">注册</span>
      </span>
      <a-menu slot="overlay" v-if="!isShowLogin">
        <a-menu-item v-for="(menu, index) in userMenus" :key="`menu${index}`">
          <span @click="toPage(menu)">{{ menu.title }}</span>
        </a-menu-item>
        <a-menu-item v-if="role !== 'visitor' && role !== 'youke'">
          <span @click="exitLogin">退出登录</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <Modal v-if="isShowEdit" @cancel="cancel" @addSuccess="addSuccess"></Modal>
  </a-col>
</template>
<script>
import Modal from '../../MPlatformPortal/pages/editPsw.vue'
import headerOperationMixin from './headOperationMixin'
import { setStorage } from '@/utils'
import imageVue from '../../MPlatformPortal/components/image.vue'

export default {
  name: 'UserOperation',
  mixins: [headerOperationMixin],
  props: {
    projectColOpt: Object
  },
  data() {
    return {
      isShowEdit: false,
      accountMessage: [
        {
          key: '',
          name: '账号信息',
          title: '账号信息',
          toRouter: '/frontAccountInfo'
        },
        {
          key: 'editPsw',
          name: '修改密码',
          title: '修改密码',
          toRouter: '/'
        },
        {
          key: '',
          name: '收藏中心',
          title: '收藏中心',
          toRouter: '/collect '
        }
      ],
      avatar:''
    }
  },
  components: {
    Modal,imageVue
  },
  created(){
    this.avatar = JSON.parse(localStorage.getItem('avatar'))
    console.log(this.avatar);
  },
  mounted() {
    switch (this.role) {
      case 'admin':
      case 'bus':
        this.accountMessage[0].key = 'company'
        break
      case 'user':
        this.accountMessage[0].key = 'person'
        break
    }
  },
  methods: {
    cancel() {
      this.isShowEdit = false
    },
    addSuccess() {
      this.isShowEdit = false
    },
    // // 前往登录页
    loginClick() {
      this.$router.push({
        path: '/login',
        query: {
          redirect: this.$route.path
        }
      })
    },
    // // 前往注册页面
    toRegister() {
      this.$router.push({
        path: '/login',
        query: { toComponent: 'register' }
      })
    },
    // 页面跳转
    toPage(item) {
      console.log(item);
      if (item.key === 'editPsw') {
        this.isShowEdit = true
      } else {
        this.$router.push({
          path: item.toRouter,
          query: { key: item.key }
        })
      }
    },
    // 退出登录
    async exitLogin() {
      this.$store.dispatch('user/clearAccountInfo')
      setStorage('role', 'youke', 0)
      this.$router.push({ path: '/login' }) //由于首页没有权限要求，可以不刷新页面获取最新token
      this.$message.success('已退出登录!')
      // window.location.replace('/') //首页有token权限要求则需刷新页面
    }
  },
  computed: {
    isShowLogin() {
      if (this.account === '游客' || this.account === '') {
        return true
      }
      return false
    },
    // 用户的可快速跳转的后台菜单
    userMenus() {
      let list = [
        {
          key: '',
          name: '账号信息',
          title: '账号信息',
          toRouter: '/frontAccountInfo'
        },
        {
          key: 'editPsw',
          name: '修改密码',
          title: '修改密码',
          toRouter: '/'
        },
        {
          key: '',
          name: '收藏中心',
          title: '收藏中心',
          toRouter: '/collect'
        }
      ]
      //限制用户
      // const userList = [
      //   '账户信息',
      //   '开放许可管理',
      //   '需求管理',
      //   '运营管理',
      //   '服务机构',
      //   '收藏管理'
      // ]
      switch (this.role) {
        case 'admin':
        case 'bus':
          this.sideOptions.forEach(option => {
            const item = option.child
              ? option.child[0]
              : { key: option.key, toRouter: option.toRouter }
            list.push({
              title: option.title,
              ...item
            })
          })
          break
        // case 'user':
        //   this.sideOptions.forEach(option => {
        //     if (userList.indexOf(option.title) >= 0) {
        //       const item = option.child[0]
        //       list.push({
        //         title: option.title,
        //         ...item
        //       })
        //     }
        //   })
        //   break
      }
      return list
    }
  }
}
</script>
<style lang="scss" scoped>
.userOpreation{
  flex-direction:unset !important;
  align-items: center;
}
</style>